<template>
  <div style="background-color: #eaedf1; overflow: hidden">
    <!-- el-card有卡片效果 -->
    <el-card style="margin: 20px 30px 170px 30px">
      <!-- 搜索区域 -->
      <el-row type="flex" justify-content="between">
        <el-col :span="9">
          <el-form :inline="true" style="width: 600px" :model.sync="formData">
            <el-input
              clearable
              v-model="formData.subject_name"
              size="small"
              style="width: 200px; margin-right: 20px"
              placeholder="学科名称"
            ></el-input>
            <el-select
              v-model="formData.is_show"
              size="small"
              placeholder="显示状态"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form>
        </el-col>
        <el-col :span="24">
          <el-button
            @click="initData"
            plain
            type="primary"
            style="margin-left: 15px"
            size="small"
            >搜索</el-button
          >
          <el-button @click="clear" size="small">重置</el-button>
        </el-col>
        <el-col :span="2">
          <el-button
            @click="addSubjectHandler"
            icon="el-icon-plus"
            size="small"
            type="primary"
            plain
            >创建学科</el-button
          >
        </el-col>
      </el-row>
      <br />
      <!-- 表格区域 -->
      <el-table border :data="list">
        <el-table-column
          width="80px"
          type="index"
          label="序号"
        ></el-table-column>
        <el-table-column
          width="80px"
          label="学科ID"
          prop="id"
        ></el-table-column>
        <el-table-column label="学科名称" prop="subject_name"></el-table-column>
        <el-table-column align="center" label="学科图标" prop="subject_icon">
          <template slot-scope="scope">
            <span v-if="scope.row.subject_icon === ''">暂无</span>
            <img v-else width="30%" :src="scope.row.subject_icon" alt="" />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="创建人"
          prop="username"
        ></el-table-column>
        <el-table-column align="center" label="是否显示">
          <template slot-scope="scope">
            <el-switch
              @change="showChange(scope.row.id, scope.row.is_show)"
              :value="scope.row.is_show"
              active-color="#13ce66"
              active-text="是"
              inactive-text="否"
              :active-value="1"
              :inactive-value="2"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" label="目录数量">
          <template slot-scope="scope">
            <span v-if="scope.row.cate_num !== 0">
              <el-link @click="linkHandler(scope.row)" type="primary"
                >{{ scope.row.cate_num
                }}<i
                  v-if="scope.row.cate_num !== 0"
                  class="el-icon-link el-icon--right"
                ></i
              ></el-link>
            </span>
            <span v-else> 0 </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              @click="editHandler(scope.row, 2)"
              circle
              type="primary"
              size="small"
              icon="el-icon-edit"
            ></el-button>
            <el-button
              @click="delHandler(scope.row.id)"
              circle
              type="danger"
              size="small"
              icon="el-icon-delete"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <br />
      <!-- 分页咯 -->
      <el-row type="flex" justify="end">
        <el-pagination
          right
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :current-page.sync="formData.page"
          :page-sizes="[10, 15, 20]"
          :page-size="formData.limit"
          layout=" total,sizes, prev, pager, next, jumper"
          :total="count"
        ></el-pagination>
      </el-row>
    </el-card>
    <add-subject @updateList="initData" :list="list" ref="addSubject" />
  </div>
</template>

<script>
import { getSubjectListApi, changeShowtApi, delSubjectApi } from '@/api/subject'
import addSubject from './components/add-subject.vue'
export default {
  components: {
    addSubject,
  },
  data() {
    return {
      formData: {
        subject_name: '',
        is_show: '', //1是显示 2是隐藏
        page: 1,
        limit: 10,
      },
      list: [], //数据列表 嘿嘿
      count: 0,
      //this is 显示状态下拉数组
      options: [
        {
          value: 1,
          label: '显示',
        },
        {
          value: 2,
          label: '隐藏',
        },
      ],
    }
  },
  created() {
    this.initData()
  },
  methods: {
    //获取学科信息数据列表
    async initData() {
      let { list, total } = await getSubjectListApi(this.formData)
      //  console.log(list);
      this.list = list
      this.count = total
    },
    //电击跳转传参 根据条件筛选渲染目录页面
    linkHandler(row) {
      this.$router.push({
        path: '/subject/directory',
        query: { formData: row, id: 1 },
      })
    },
    //分页咯
    handleSizeChange(val) {
      this.formData.limit = val
      this.initData()
    },
    // 分咯
    handleCurrentChange(val) {
      this.formData.page = val
      this.initData()
    },
    //重置
    clear() {
      this.formData = {
        subject_name: '',
        is_show: '', //1是显示 2是隐藏
        page: 1,
        limit: 10,
      }
      this.initData()
    },
    //切换表格内的显示隐藏
    async showChange(id, show) {
      try {
        let gaga = show == 1 ? 2 : 1
        await changeShowtApi({ id: id, is_show: gaga })
        this.$message.success('切换成功啦啦啦啦(*^▽^*)')
        this.initData()
      } catch (error) {
        console.log(error)
      }
    },
    //删掉咯
    async delHandler(id) {
        // await this.$confirm('鸽鸽,真的要删除嘛┭┮﹏┭┮', '提示', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning',
        //   center: true
        // }).then(() => {
        //   this.$message({
        //     type: 'success',
        //     message: '你真的把我删了![○･｀Д´･ ○]'
        //   });
        // }).catch(() => {
        //   this.$message({
        //     type: 'info',
        //     message: '我就知道我的宝儿不会删除的啦ლ(°◕‵ƹ′◕ლ)'
        //   });
        // });
        await this.$confirm('确定删除吗?')
        await delSubjectApi(id)
        //如果当前页面就一条数据 你还给删了 那就page--
        if (this.formData.page > 1 && this.list.length === 1) {
          this.formData.page--
        }
        // setTimeout(() => {
        //   this.message.success('呜呜呜呜呜呜呜呜呜呜(灬ꈍ ꈍ灬)')
        // },1500)
        // setTimeout(() => {
        //   this.message.success('祝你幸福(灬ꈍ ꈍ灬) 啊啊啊啊啊啊啊')
        // },2500)
        this.$message.success('删除成功啦!(*^▽^*)')
        this.initData()
      },
    //修改回显
    editHandler(val, type) {
      if (type === 2) {
        this.$refs.addSubject.formData = val
        this.$refs.addSubject.dialogShow = true
      }
      // console.log(val);
    },
    //新增打开dialog
    addSubjectHandler() {
      this.$refs.addSubject.formData = {
        is_show: null,
        sort: 10,
        subject_icon: '',
        subject_name: '',
      }
      this.$refs.addSubject.dialogShow = true
    },
  },
}
</script>

<style lang="scss" scoped>
//给dialog  的 title添加下border
::v-deep .el-dialog__header {
  border-bottom: 1px solid #ebebeb;
}
</style>
